
<template>
    <div style="width:100%; overflow-x:scroll;">
        <div ref="barChart" style="width: 100%; height: 100%;" ></div>
    </div>
</template>


<script setup lang="ts">
import { Toast } from '/@/utils/Message';
import { reactive, ref } from 'vue'
import { onMounted } from "vue"
import * as echarts from "echarts";

const props = defineProps({
    titleData: {
        type: Array,
        // default: false,
    },
    minBarData: {
       type: Array,
      
    },
    maxBarData: {
      type: Array,
    }

});
const barChart = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

onMounted(() => {
  init();
})


function init() {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(barChart.value);
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '单位：万元',
            left:30,
            textStyle:{
                fontSize: 15,
                fontWeight: "bold",
                color: "#464646",
            },
        },
        xAxis: {
            type: 'category',
            data: props.titleData,
            axisLabel: { interval: 0, rotate: 45 },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'//虚线
                },
                show: true //隐藏
            },
        },


      series: [
         
          
          {
            //    backgroundStyle: {
            //     color: 'rgba(180, 180, 180, 0.5)'
            // },
                // showBackground: true,
                data:props.minBarData,
               type: 'bar',
                color:'#007d7b',
                
                stack: "Search Engine",
                name:'最小',
                barWidth:20,
                label: {
                    show: true,
                    position: 'top'
                    
                },
                itemStyle: {
                    normal: {
                        //柱状图设置圆角
                        // barBorderRadius:[10,10,0,0],
                        color: function (params:any) {
                            // 给出颜色组
                            var colorList = ['#d7a02b','#cca272', '#74608f', '#d7a02b', '#c8ba23', '#74608f'];
                            return colorList[params.dataIndex]
                        },
                    }
                },

        },
            {
            type: 'bar',
              stack: "Search Engine",
                color:'rgba(180, 180, 180, 0.5)',
              barWidth: 20,
            name:'最大',
            data: props.maxBarData,
            label: {
                    show: true,
                    position: 'top' 
            }
            }
         
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);
}


var data = {
    area: props.titleData,
    legend: ['min', 'max'],
    data: [
        props.maxBarData,
        props.minBarData,
    ],
};
// var colors = ['#4C98FB', '#73DEBD'];
// function init() {
//   // 基于准备好的dom，初始化echarts实例
//   const chart = echarts.init(barChart.value);
//   var option = {
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'none',
//       },
//     },
//     color: colors,
//     legend: {
//       top: 10,
//       left: 200,
//       itemWidth: 10,
//       itemHeight: 10,
//       textStyle: {
//         fontSize: 14,
//         padding: [3, 0, 0, 0],
//       },
//       data: data.legend,
//     },
//     grid: {
//       left: '3%',
//       right: '4%',
//       bottom: '13%',
//       containLabel: true,
//     },
//     xAxis: {
//       type: 'category',
//       data: data.area
//     },
//     yAxis: {
//       type: 'value',
//       axisLine: {
//         width: 5,
//       },
//       splitLine: {
//         show: false,
//       },
//     },
//     series: [],
//   };
//   for (var i = 0; i < data.legend.length; i++) {
//     option.series.push({
//       name: data.legend[i],
//       type: 'bar',
//       stack: '总量',
//       barWidth: '10%',
//       label: {
//         show: false,
//         position: 'insideRight',
//       },
//       data: data.data[i],
//     });
//   }
//   chart.setOption(option);
// }
</script>

<style lang="less" scoped></style>
  
  